<template> 
    <div class="select-page">
        <v-container fluid class="select-container">
            <v-row>
                <v-col cols="12" sm="12" md="12" lg="12" xl="12">
                    <div></div>
                    <div class="select-text">
                        <p id="companionMethods"></p>
                    </div>

                    <div class="select-nebula">
                        <!-- <planet-container :image-url=url1></planet-container>
                        <planet-container></planet-container>
                        <planet-container></planet-container>
                        <earth></earth> -->
                    </div>
                </v-col>
            </v-row>
        </v-container>
    </div>
</template>

<script setup>
import TypeIt from 'typeit';
import { ref, reactive, onMounted } from 'vue';
import PlanetContainer from './PlanetContainer.vue';
import earth from './earth.vue';
const url1 = 'https://p6.itc.cn/images01/20200915/27d8939ccc03434496cf23806259693b.jpeg'
onMounted(() => {
    new TypeIt("#companionMethods", {
        strings: ["这将是一段激动人心的旅程，你会获得对现有技术更深入的理解，同时激发你对新概念和创新的不懈追求，点燃你的探索激情。", "前方出现多片星云，请选择你的方向，我们即将进入不同的领域！"],
        speed: 150,
        waitUntilVisible: true,
    }).go();
})

</script>

<style scoped>
.select-page {
    display: block;
}

.select-nebula {
    display: flex;
}
.select-text{
    width: 80vw;
    height: 80vh;
    color: #ffffff;
}
/* 手机设备 */
@media (max-width: 767px) {
    .select-text{
    width: 80vw;
    height: 80vh;
    color: #ffffff;
}

}
/* 平板设备 */
@media (min-width: 768px) and (max-width: 1023px) {
    .select-text{
    width: 80vw;
    height: 80vh;
    color: #ffffff;
}

}
/* pc设备 */
@media (min-width: 1024px) {
    .select-text{
    width: 50vw;
    height: 50vh;
    color: #ffffff;
}
    
}
</style>